<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<!-- axios 用来发送网络请求 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router用来管理路由 -->
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
		<!-- 引入elementUI -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	</head>
	<body>
		<div id="app">

			<router-view></router-view>

		</div>

		<div></div>
		<script type="text/javascript">
			const request = axios.create({
				// 指定请求HTTP响应码错误范围
				validateStatus: function(status) {
					return true
				},
				// 指定基本的url地址
				baseURL: 'http://127.0.0.1:5000',
			})

			// 添加请求拦截器：每次请求接口都会自动调用
			request.interceptors.request.use(function(config) {
				// 在发送请求之前,判断是否有token
				if (window.sessionStorage.getItem('token')) {
					config.headers.Authorization = 'JWT ' + window.sessionStorage.getItem('token')
				}
				console.log('请求头', config.headers)
				return config;
			})


			// 定义组件
			const login = {
				template: `
				<div class="login_box" style="width: 600px;height: 400px; margin: 50px auto;text-align: center;">
					<el-card class="box-card">
						<h1>用 户 登 录</h1>
						<el-form ref="form" :model="formLogin" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="formLogin.username"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model="formLogin.password" type='password'></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="loginHandle">点击登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</div>
				`,
				data() {
					return {
						formLogin: {
							username: '',
							password: ''
						}
					}
				},
				methods: {
					// 点击登录之后，处理登录的方法
					loginHandle: async function() {
						// 请求登录接口
						console.log('请求登录接口')
						const response = await request.post('/user/login', this.formLogin)
						console.log(response)
						// 判断登录请求是否成功 
						if (response.data['code'] === '0') {
							alert('登录成功')
							window.sessionStorage.setItem('token', response.data.token)
							this.$router.push('/home')
						} else {
							alert('登录失败')
						}
					}
				}
			}
			// const home = {
			// 	template: `<div>
			// 	<el-menu
			// 	 @select = 'handle'
			// 	  class="el-menu-demo"
			// 	  mode="horizontal"
			// 	  background-color="#545c64"
			// 	  text-color="#fff"
			// 	  active-text-color="#ffd04b">
			// 	 <el-menu-item index="/cases">用例列表</el-menu-item>
			// 	 <el-menu-item index="/interface">接口列表</el-menu-item>
			// 	 <el-menu-item index="/projects">项目列表</el-menu-item>
			// 	</el-menu>
			// 	<router-view></router-view>
			// 	</div>`,
			// 	methods:{
			// 		handle(index,indexPath){
			// 			console.log(index),
			// 			this.$router.push(index)
			// 		}
			// 	}
			// }
			const home = {
				template: `<div>
				<el-menu
				  :router = 'rou'
				  background-color='#777777'
				  class="el-menu-demo"
				  mode="horizontal"
				  default-active='/cases'	
				  text-color="#fff"
				  active-text-color="#00aaff">
				 <el-menu-item index="/cases">用例列表</el-menu-item>
				 <el-menu-item index="/interface">接口列表</el-menu-item>
				 <el-menu-item index="/projects">项目列表</el-menu-item>
				</el-menu>
				<router-view></router-view>
				</div>`,
				data(){
					return{
						rou : true
					}
				}				
			}

			const project = {
				template: `<div>project </div>`
			}
			const cases = {
				template: `<div> cases</div>`
			}
			const interface = {
				template: `<div>interface</div>`
			}

			// 定义路由规则
			const router = new VueRouter({
				routes: [{
						path: '/',
						redirect: '/home'
					},
					{
						path: '/login',
						component: login
					},
					{
						path: '/home',
						component: home,
						redirect:'/cases',
						children: [{
								path: '/projects',
								component: project
							},
							{
								path: '/cases',
								component: cases
							},
							{
								path: '/interface',
								component: interface
							}
						]
					},

				]
			})




			// 添加路由导航守卫
			// 用例对访问的路由进行权限控制
			// 除了login这个路由其他的路由都要进行了登录之后才能访问
			router.beforeEach((to, from, next) => {
				// console.log(to)
				// console.log(from)
				// console.log(next)
				// 判断访问的是否是登录页面
				if (to.path === '/login') {
					return next()
					// 判断当前sessionStorage中是否有token(判断是否登录过)
				} else if (window.sessionStorage.getItem('token')) {
					return next()
				} else {
					return next('/login')
				}
			})



			// 初始vue对象
			var vm = new Vue({
				el: '#app',
				router: router,
				data: {

				},
				methods: {

				}

			})
		</script>




	</body>
</html>
